<template>
  <div>
    <h1>评委获取</h1>
    <ClTable v-if="loaded" ref="refTable" :table-data="judgesInfo" show-selection show-index :column-list="COLUMN_LIST">
      <template #opt-btn="{ multipleSelectionId }">
        <el-button
          type="primary"
          plain
          :disabled="multipleSelectionId.length === 0"
          @click="handleDeleteBatch(multipleSelectionId)"
        >
          删除
        </el-button>
        <el-button type="primary" @click="handleAdd">新增</el-button>
      </template>
      <template #column>
        <el-table-column label="评委类型" prop="type" width="120">
          <template #default="{ row }">
            {{ judgesInfoChineseMap.get(row.type) }}
          </template>
        </el-table-column>
        <el-table-column label="登录码" prop="loginCode">
          <template #default="{ row }">
            <el-button link type="primary" @click="handleCopy(row.loginCode)">{{ row.loginCode }}</el-button>
          </template>
        </el-table-column>
        <el-table-column label="评审范围" width="200">
          <template #default="{ row }">
            <div class="m-3">
              {{ row.scopeNameList?.join('，') }}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="是否回避" width="100" prop="isAvoid">
          <template #default="{ row }">
            {{ row.isAvoid ? '是' : '否' }}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200">
          <template #default="{ row }">
            <el-button link type="primary" @click="handleEdit(row)">编辑</el-button>
            <el-button link type="danger" @click="handleDelete(row)">删除</el-button>
          </template>
        </el-table-column>
      </template>
    </ClTable>
    <CurdDialog v-if="hookVisible" v-model="hookVisible" :info="dialogInfo" :type="type" @at-close="onCloseDialog" />
  </div>
</template>

<script setup lang="ts">
import { COLUMN_LIST, FORM_ITEM } from './data'
import CurdDialog from './CurdDialog.vue'
import { commonLoadEnumValue } from '@/api/common'
import { judgesInfo, judgesInfoBatchDelete, judgesInfoDelete } from '@/api/judgesInfo'

onMounted(async () => {
  init()
})
const loaded = ref(false)
const judgesInfoChineseMap = ref()
const init = async () => {
  try {
    loaded.value = false
    const res: any = await commonLoadEnumValue({ typeCode: 'JudgesTypeEnum' })
    // 将评委类型转换为中文
    const map = new Map()
    res.forEach((item) => {
      map.set(item.key, item.value)
    })
    judgesInfoChineseMap.value = map
    FORM_ITEM.forEach((item) => {
      if (item.key === 'type') {
        item.elementConfig.options = res
      }
    })
    loaded.value = true
  } catch (error) {
    loaded.value = true
  }
}
const refTable = ref()

const { type, hookVisible, dialogInfo, onOpenDialog, onCloseDialog } = useDialog(refTable)
const handleAdd = () => {
  type.value = '新增评委'
  onOpenDialog({})
}
const handleEdit = (row) => {
  type.value = '编辑评委'
  onOpenDialog(row)
}
const handleDelete = async (row) => {
  elConfirmNoCancelBtn('确认框', '确定删除该评委吗？')
    .then(async (res) => {
      if (res === 'confirm') {
        await judgesInfoDelete({ id: row.id })
        await refTable.value.initTable()
      }
    })
    .catch((e) => {
      console.log('🐷 🐽 elConfirmNoCancelBtn 🐽 e👉👉👉', e)
    })
}

const handleDeleteBatch = async (ids) => {
  elConfirmNoCancelBtn('确认框', '确定删除该评委吗？')
    .then(async (res) => {
      if (res === 'confirm') {
        await judgesInfoBatchDelete(ids)
        await refTable.value.initTable()
      }
    })
    .catch((e) => {
      console.log('🐷 🐽 elConfirmNoCancelBtn 🐽 e👉👉👉', e)
    })
}
const handleCopy = (loginCode) => {
  const msg = `http://10.0.36.67:8082/#/login?loginCode=${loginCode}`
  copyValueToClipboard(msg)
}
</script>

<style scoped lang="scss"></style>
